<template>
  <div class="region">
    <div class="region-header">
      <div class="back">
        <van-icon name="arrow-left" size="15" @click="back" />
        <div class="region-title">热门城市</div>
      </div>
    </div>
    <div class="hotspot" @click="fn">
      <van-index-bar>
        <van-cell title="北京" id="aa" class="item" />
        <van-cell title="上海" data-index="aa" class="item" />
        <van-cell title="成都" id="aa" class="item" />
        <van-cell title="广州" id="aa" class="item" />

        <van-index-anchor index="B" />
        <van-cell title="包头" id="aa" />
        <van-cell title="北京" id="aa" />

        <van-index-anchor index="C" />
        <van-cell title="成都" id="aa" />
        <van-cell title="长春" id="aa" />
        <van-cell title="长沙" id="aa" />
        <van-cell title="重庆" id="aa" />

        <van-index-anchor index="D" />
        <van-cell title="大连" id="aa" />

        <van-index-anchor index="F" />
        <van-cell title="福州" id="aa" />
        <van-cell title="佛山" id="aa" />

        <van-index-anchor index="G" />
        <van-cell title="贵阳" id="aa" />
        <van-cell title="广州" id="aa" />

        <van-index-anchor index="H" />
        <van-cell title="杭州" id="aa" />
        <van-cell title="哈尔滨" id="aa" />
        <van-cell title="合肥" id="aa" />
        <van-cell title="海口" id="aa" />
        <van-cell title="惠州" id="aa" />
        <van-cell title="呼和浩特" />

        <van-index-anchor index="J" />
        <van-cell title="济南" id="aa" />

        <van-index-anchor index="K" />
        <van-cell title="昆明" id="aa" />

        <van-index-anchor index="L" />
        <van-cell title="廊坊" id="aa" />
        <van-cell title="洛阳" id="aa" />
        <van-cell title="聊城" id="aa" />
        <van-cell title="陵水县" id="aa" />
        <van-cell title="兰州" id="aa" />

        <van-index-anchor index="M" />
        <van-cell title="锦阳" id="aa" />

        <van-index-anchor index="N" />
        <van-cell title="宁波" id="aa" />
        <van-cell title="南充" id="aa" />
        <van-cell title="南宁" id="aa" />
        <van-cell title="南昌" id="aa" />
        <van-cell title="南京" id="aa" />

        <van-index-anchor index="Q" />
        <van-cell title="青岛" id="aa" />

        <van-index-anchor index="R" />
        <van-cell title="日照" id="aa" />

        <van-index-anchor index="S" />
        <van-cell title="上海" id="aa" />
        <van-cell title="深圳" id="aa" />
        <van-cell title="沈阳" id="aa" />
        <van-cell title="苏州" id="aa" />
        <van-cell title="石家庄" id="aa" />

        <van-index-anchor index="T" />
        <van-cell title="太原" id="aa" />
        <van-cell title="天津" id="aa" />

        <van-index-anchor index="W" />
        <van-cell title="温州" id="aa" />
        <van-cell title="万宁" id="aa" />
        <van-cell title="无锡" id="aa" />
        <van-cell title="武汉" id="aa" />

        <van-index-anchor index="X" />
        <van-cell title="西安" id="aa" />
        <van-cell title="厦门" id="aa" />

        <van-index-anchor index="Y" />
        <van-cell title="银川" id="aa" />
        <van-cell title="扬州" id="aa" />
        <van-cell title="宜昌" id="aa" />

        <van-index-anchor index="Z" />
        <van-cell title="郑州" id="aa" />
        <van-cell title="淄博" id="aa" />
        <van-cell title="舟山" id="aa" />
        <van-cell title="珠海" id="aa" />
        <van-cell title="湛江" id="aa" />
        <van-cell title="中山" id="aa" />
      </van-index-bar>
    </div>
  </div>
</template>

<script>
export default {
  name: "Region",

  data() {
    return {};
  },

  mounted() {},

  methods: {
    fn(e) {
      // console.log(e.target.innerText);
      // console.log(e.target.nodeName);
      if (e.target.nodeName == "SPAN") {
        // console.log(e.target.innerText);
        this.$store.commit("getcity", e.target.innerText);
        this.back();
      }
    },
    back() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="less" scoped>
.region {
  width: 100%;
  overflow: hidden;
  position: relative;
  .region-header {
    width: 100%;
    border-bottom: 1px solid #ebebeb;
    padding: 0 22px;
    box-sizing: border-box;
    background: #fff;
    .back {
      width: 35%;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      .region-title {
        margin-left: 30px;
        font-size: 15px;
      }
    }
  }

  .hotspot {
    width: 100%;
    position: relative;
    /deep/.van-index-anchor {
      color: #007aff;
    }
    .item {
      width: auto;
      border: 0.5px #ebebeb solid !important;
      display: inline-block;
      height: 33px;
      line-height: 33px;
      margin: 16px 0px 0 11px;
      padding: 0 11px;
      font-size: 15px;
    }
    .van-cell {
      border-bottom: 1px solid #ebebeb;
    }
    /deep/.van-index-bar__sidebar {
      .van-index-bar__index {
        margin: 5px 5px 5px 0;
        color: #007aff;
      }
    }
  }
}
</style>